<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
          <Menu
            :default-active="defaultActiveKey"
            class="el-menu-vertical-demo el-menu--dark"
            text-color="#909399"
          >
          <MenuItem
            v-for="(item,index) in navList"
            :index="index+''"
            :key="index"
            @click="onRouterPush(item.path)"
          >
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </MenuItem>
      </Menu>
      </el-aside>
      <el-container>
        <el-header>
           <div class="heads">
            <div class="head-t">
              <h2>美洽医疗 -- -医生端</h2>
              <span class="font-time">{{time}}</span>
              <div class="right">
              <Menu class="el-menu-demo" mode="horizontal">
                <MenuItem>
                  <a href="http://www.liyizhuang.com/" target="_blank">
                    <Button>当前新冠监测</Button>
                  </a>
                </MenuItem>
                <Submenu index="1">
                  <template slot="title">
                    <i class="Img">
                      <img src="../../../assets/logo.png" style="width:30px" />
                    </i>
                    <span style="font-size:20px">{{per.name}}</span>
                  </template>
                  <MenuItem index="1-1" @click="onRouterPush('/doctor/homeIndex/personal')">个人信息</MenuItem>
                  <MenuItem index="1-2">修改密码</MenuItem>
                </Submenu>
                <MenuItem index="2">
                  <i class="el-icon-chat-square"></i>消息
                </MenuItem>
                <MenuItem index="3">
                  <i class="el-icon-question"></i>帮助
                </MenuItem>
                <MenuItem @click="goOut">
                  <i class="el-icon-right"></i>退出
                </MenuItem>
              </Menu>
           </div>
           </div>
        </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Container, Main, Aside, Menu, MenuItem, Submenu, BreadcrumbItem, Breadcrumb, Button } from 'element-ui'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { getDSelf } from '@/api/api'
export default {
    name:'dochome',
      components: {
      Container,
      Main,
      Aside,
      Menu,
      Submenu,
      MenuItem,
      BreadcrumbItem,
      Breadcrumb,
      Button
    },
    data(){
      return{
      defaultActiveKey: '0',
      navList: [
        {
          path: '/dochome/dochomes',
          title: '首页',
          icon: 'el-icon-s-home'
        }, {
          path: '/dochome/inquiry',
          title: '问诊',
          icon: 'el-icon-first-aid-kit'
        }, {
          path: '/dochome/project',
          title: '项目',
          icon: 'el-icon-folder-opened'
        }, {
          path: '/dochome/cashout',
          title: '提现',
          icon: 'el-icon-finished'
        }
      ],
      time: moment().format('llll'),
      todos: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      per: {
        name: ''
      },
      breadcrumb: this.$route.matched.slice(2)
      }
    },
    async created() {
      const self = await getDSelf()
      if (self.code === 200) {
        const per = self.data[0]
        console.log(per, 'per')
        per.name = self.data[0].nickname || self.data[0].username;
        per.sex = self.data[0].sex ? '男' : '女';
        per.phoneNumber = self.data[0].phonenumber;
        localStorage.setItem('doc_per', JSON.stringify(per))
        this.per.name = per.name
      }
    },
      beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    onRouterPush(path) {
      this.$router.push(path)
    },
    goOut() {
      localStorage.removeItem('doctor_id')
      localStorage.removeItem('doctor_token')
      this.$router.replace('/doclogin')
    }
  },
  watch: {
    $route() {
      this.breadcrumb = this.$route.matched.slice(2)
      const index = this.navList.findIndex(item => window.location.pathname.includes(item.path))
      this.defaultActiveKey = index + ''
    }
  }
}
</script>

<style lang="scss">
.home{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-container{
  height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  background-color: #eef1f6;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 100%;
  .el-menu {
    /* background: none; */
    height: 100%;
    &.el-menu--dark {
      background-color: #324157;
    }
    .el-menu-item.is-active {
      background: #48576a;
    }
    .el-menu-item:hover {
      background: #48576a;
    }
    .el-menu-item {
      span {
        font-size: 20px;
      }
    }
  }
}
.heads {
  .head-t {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .right{
    flex:3;
    text-align: center;
    ul{
      flex:1;
    }
  }
  h2{
    flex:1;
  }
  span{
    flex:1;
  }
  .font-time {
    font-size: 20px;
  }
  .el-menu {
    font-size: 20px;
  }
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  height: 100%;
  overflow: auto;
  padding: 0 40px;
  .heads {
    .head-t {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-breadcrumb__inner {
      font-size: 22px;
      font-weight: 400;
    }
    .el-breadcrumb__separator {
      font-size: 24px;
      font-weight: 400;
    }
  }
  .el-menu {
    background: #e9eef3;
  }
}
.el-container {
  height: 100%;
  .main {
    margin-top: 40px;
  }
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border: none;
}
.el-header .right .el-menu{
  background-color: #b3c0d1;
  color: #333;
}
</style>